@import 'src/styles/theme';

.login-page {
  @extend %page;
  background-color: $primary-color;
  height: 100vh;
  padding: 36px;
  box-sizing: border-box;

  &-header {
    @extend %flex-row;
    flex: 3;
    align-items: flex-end;
    padding-bottom: 100px;

    &-txt {
      @extend %flex-column;
      flex: 1;
      font-size: 80px;
      color: $white;
      font-weight: bold;
      line-height: 100px;
      @extend %flex-1;
    }

    &-logo {
      margin-bottom: 20px;
      width: 150px;
      height: 82px;
    }
  }

  &-body {
    @extend %flex-column;
    flex: 7;

    .login-form {
      @extend %flex-column;
      flex: 1;
      padding-top: 20px;

      &-brief {
        font-size: 32px;
        font-weight: 900;
        line-height: 36px;
      }

      &-title {
        font-size: 25px;
        font-weight: 400;
      }

      &-fields {
        padding-top: 20px;

        &-txt-input {
          margin-top: 20px;
          margin-left: 0;
          padding-left: 20px;
          border-radius: 8px;
        }

        &-vcode-value {
          margin-top: 28px;
          margin-left: 0;
        }
      }
    }

    .login-submit-button {
      background-color: darken($primary-color, 20%);
      border-radius: 10px;
      margin-bottom: 40px;
      box-shadow: 0 15px 10px 1px rgba(40, 170, 255, 0.1);
    }
  }
}
